 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>流星雨</title>
    <script>
        var context;
        var arr = new Array();
        var starCount = 800;
        var rains = new Array();
        var rainCount = 20;

        function init() {
            var stars = document.getElementById("stars");
            var moon = new Image();
            moon.src = "#"
            windowWidth = window.innerWidth; 
            stars.width = windowWidth;
            stars.height = window.innerHeight;
            context = stars.getContext("2d");
            context.drawImage(moon, -5, -10)
        }
        var Star = function () {
            this.x = windowWidth * Math.random();
            this.y = 5000 * Math.random();
            this.text = ".";//文本
            this.color = "pink";//颜色
            this.getColor = function () {
                var _r = Math.random();
                if (_r < 0.5) {
                    this.color = "#333";
                } else {
                    this.color = "white";
                }
            }
//初始化
            this.init = function () {
                this.getColor();
            }
//绘制
            this.draw = function () {
                context.fillStyle = this.color;
                context.fillText(this.text, this.x, this.y);
            }
        }

        //画月亮
   //       function drawMoon(){
   //          var moon = new Image();
   //          moon.src = "/images/yueliang.jpg"
   //          console.log(context.drawImage(moon, -5, -10),"输出月亮!");
			
   //      }
        window.onload = function () {
            init();
//画星星
            for (var i = 0; i < starCount; i++) {
                var star = new Star();
                star.init();
                star.draw();
                arr.push(star);
            }
//画流星
            for (var i = 0; i < rainCount; i++) {
                var rain = new MeteorRain();
                rain.init();
                rain.draw();
                rains.push(rain);
            }
            // drawMoon();//绘制月亮
            playStars();//绘制闪动的星星
            playRains();//绘制流星

        }
        //星星闪起来
        function playStars() {
            for (var n = 0; n < starCount; n++) {
                arr[n].getColor();
                arr[n].draw();
            }

            setTimeout("playStars()", 100);
        }
        /*流星雨开始*/
        var MeteorRain = function () {
            this.x = -1;
            this.y = -1;
            this.length = -1;//长度
            this.angle = 30;
            this.width = -1;
            this.height = -1;
            this.speed = 1;
            this.offset_x = -1;
            this.offset_y = -1;
            this.alpha = 1; 
            this.color1 = "";
            this.color2 = ""; 
            this.init = function () //初始化
            {
                this.getPos();
                this.alpha = 1;//透明度
                this.getRandomColor();
//最小长度，最大长度
                var x = Math.random() * 80 + 150;
                this.length = Math.ceil(x);
                this.angle = 30; //流星倾斜角
                x = Math.random() + 0.5;
                this.speed = Math.ceil(x); //流星的速度
                var cos = Math.cos(this.angle * 3.14 / 180);
                var sin = Math.sin(this.angle * 3.14 / 180);
                this.width = this.length * cos; //流星所占宽度
                this.height = this.length * sin;//流星所占高度
                this.offset_x = this.speed * cos;
                this.offset_y = this.speed * sin;
            }
            this.getRandomColor = function () {
                var a = Math.ceil(255 - 240 * Math.random());
                this.color1 = "rgba(" + a + "," + a + "," + a + ",1)";
                this.color2 = "black";
            }
            this.countPos = function ()//
            {
                this.x = this.x - this.offset_x;
                this.y = this.y + this.offset_y;
            }
            this.getPos = function () //
            {
                this.x = Math.random() * window.innerWidth; //窗口高度
                this.y = Math.random() * window.innerHeight; //窗口宽度
            }
            this.draw = function () //绘制一个流星的函数
            {
                context.save();
                context.beginPath();
                context.lineWidth = 1; //宽度
                context.globalAlpha = this.alpha; //设置透明度
                var line = context.createLinearGradient(this.x, this.y,
                    this.x + this.width,
                    this.y - this.height);
//分段设置颜色
                line.addColorStop(0, "pink");
                line.addColorStop(0.3, this.color1);
                line.addColorStop(0.6, this.color2);
                context.strokeStyle = line;
//起点
                context.moveTo(this.x, this.y);
//终点
                context.lineTo(this.x + this.width, this.y - this.height);
                context.closePath();
                context.stroke();
                context.restore();
            }
            this.move = function () {
//清空流星像素
                var x = this.x + this.width - this.offset_x;
                var y = this.y - this.height;
                context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5);
                this.countPos();
//透明度增加
                this.alpha -= 0.002;
//重绘
                this.draw();
            }
        }

        //绘制流星
        function playRains() {

            for (var n = 0; n < rainCount; n++) {
                var rain = rains[n];
                rain.move();//移动
                if (rain.y > window.innerHeight) {//超出界限后重来
                    context.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height);
                    rains[n] = new MeteorRain();
                    rains[n].init();
                }
            }
            setTimeout("playRains()", 2);
        }

        /*流星雨结束*/
    </script>
    <style type="text/css">
        body {
            background-color: black;
        }

        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
			background: url(images/yl.jpg) no-repeat;
			background-size: 1400px;
        }
    </style>
</head>
<body>
<canvas id="stars"></canvas>
</body>
</html>
